<template>
  <div class="m-header-index">
    <div class="m-top m-app-container clearfix">
      <div class="m-left fl">
        <span class="icon-service">客服电话：400-882-6960</span>
      </div>
      <div class="m-right fr">
        <span @click="onJump('login')">{{token ? userInfo.user : '登录'}} | </span>
        <span @click="onJump('register')">{{token ? '退出' : '注册'}} | </span>
        <span class="icon-phone">APP下载 | </span>
        <span @click="jumpHelp">帮助中心</span>
      </div>
    </div>
    <!-- 导航 -->
    <div class="m-bottom">
      <div class="m-app-container clearfix">
        <div class="icon-login fl" @click="$router.push('/')"></div>
        <div class="fr">
          <ul>
            <li 
              v-for="(nav, navIndex) in navList"
              :key="navIndex" 
              :class="{'actived': curNavIndex == navIndex}"
              @click="changeNav(nav, navIndex)">{{nav.title}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { session } from 'js/util'
import { mapGetters, mapMutations } from 'vuex'

export default {
  data() {
    return {
      navList: [
        {
          'link': '/',
          'title': '首页'
        },
        {
          'link': '/proarea',
          'title': '智选智投'
        },
        // {
        //   'link': '#',
        //   'title': '转让专区'
        // },
        {
          'link': '/finance',
          'title': '融资申请'
        },
        {
          'link': '/my',
          'title': '我的账号'
        },
        {
          'link': '/about',
          'title': '关于我们'
        }
      ], // 导航列表
      curNavIndex: session.get('curNavIndex') || 0 // 默认选中导航第一个下标
    }
  },
  methods: {
    ...mapMutations(['clearUserInfo']),
    /**
     * 登录，注册
     */
    onJump(type) {
      if (this.token && type == 'register') {
        this.clearUserInfo()
        return
      }
      if (type == 'login') {
        this.$router.push('/login')
        return
      }
      this.$router.push('/register')
    },
    /**
     * 点击跳转导航
     */
    changeNav(nav, curIndex) {
      if (!nav.link) {
        this.$router.push('/')
        return
      }
      this.curNavIndex = curIndex
      if (curIndex == 4) {
        this.$toast('该功能暂未开放...')
        return
      }
      session.set('curNavIndex', this.curNavIndex) // 存储当前的导航下标
      this.$router.push(`${nav.link}`)
    },
    /**
     * 帮助中心
     */
    jumpHelp() {
      this.$toast('该功能暂未开放...')
    }
  },
  computed: {
    ...mapGetters(['token', 'userInfo'])
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.m-app-container {
  max-width: 1230px;
  width: 1230px;
  margin: 0 auto;
}
.icon-service {
  &::before {
    content: '';
    width: 16px;
    line-height: 12px;
    height: 12px;
    display: inline-block;
    padding-right: 8px;
    background: url(../assets/mobile-service.png) no-repeat;
  }
}
.icon-phone {
  &::before {
    content: '';
    width: 12px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../assets/icon-app.png) no-repeat;
  }
}
.m-header-index {
  width: 100%;
  font-size: 12px;
  .m-top {
    position: relative;
    height: 36px;
    line-height: 36px;
    background-color: $bg-gray;
  }
  .m-right {
    span {
      cursor: pointer;
    }
  }
  .m-bottom {
    width: 100%;
    height: 90px;
    line-height: 90px;
    background-color: $color-white;
    padding: 16px 0;
    .icon-login {
      width: 156px;
      height: 60px;
      background: url(../assets/logo.png) no-repeat
    }
    ul {
      list-style: none;
      padding: 0;
      margin-top: -17px;
      line-height: 90px;
      li {
        float: left;    
        margin-left: 30px;
        font-size: 18px;
        cursor: pointer;
      }
      .actived {
        color: $color-main
      }
    }
  }
}
</style>
